<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>母亲节快乐</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#943e4e',
                        secondary: '#f8e9e9',
                        accent: '#d4a5a5',
                        light: '#fdf6f6',
                        dark: '#4a2525',
                        envelope: '#e8c2a4',
                        envelopeDark: '#d2a887',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['"Noto Serif SC"', 'serif'],
                        cursive: ['"Dancing Script"', 'cursive'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .text-shadow-lg {
                text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
            }
            .text-shadow-glow {
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(148, 62, 78, 0.3);
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            .animate-float-delay-1 {
                animation: float 6s ease-in-out 1s infinite;
            }
            .animate-float-delay-2 {
                animation: float 6s ease-in-out 2s infinite;
            }
            .animate-float-delay-3 {
                animation: float 6s ease-in-out 3s infinite;
            }
            .bg-gradient-love {
                background: linear-gradient(135deg, #f8e9e9 0%, #fadadd 100%);
            }
            .bg-glass {
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
            }
            .heart-beat {
                animation: heartBeat 1.5s ease-in-out infinite;
            }
            .scale-hover {
                transition: transform 0.3s ease;
            }
            .scale-hover:hover {
                transform: scale(1.05);
            }
            .envelope-shadow {
                box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
            }
            .animate-fade-in {
                animation: fadeIn 1s ease-in-out forwards;
            }
            .animate-slide-up {
                animation: slideUp 1s ease-out forwards;
            }
            .animate-scale {
                animation: scale 1s ease-out forwards;
            }
            .heart-shape {
                position: relative;
                width: 100px;
                height: 90px;
                transform: rotate(45deg);
                transform-origin: 50px 50px;
            }
            .heart-shape:before,
            .heart-shape:after {
                content: "";
                position: absolute;
                width: 80px;
                height: 80px;
                border-radius: 50%;
            }
            .heart-shape:before {
                top: -40px;
                left: 0;
            }
            .heart-shape:after {
                top: 0;
                left: -40px;
            }
        }

        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            25% { transform: translateY(-10px) rotate(1deg); }
            50% { transform: translateY(0px) rotate(0deg); }
            75% { transform: translateY(10px) rotate(-1deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }
        
        @keyframes heartBeat {
            0% { transform: scale(1) rotate(45deg); }
            14% { transform: scale(1.1) rotate(45deg); }
            28% { transform: scale(1) rotate(45deg); }
            42% { transform: scale(1.1) rotate(45deg); }
            70% { transform: scale(1) rotate(45deg); }
        }
        
        @keyframes openEnvelope {
            0% { transform: rotateX(0deg); }
            100% { transform: rotateX(-180deg); }
        }
        
        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        
        @keyframes slideUp {
            0% { transform: translateY(50px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }
        
        @keyframes scale {
            0% { transform: scale(0.8); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
    </style>
    <!-- 引入中文字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Inter:wght@300;400;500;600;700&family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-love min-h-screen flex items-center justify-center overflow-hidden">
    <!-- 文字雨Canvas -->
    <canvas id="canvas" class="fixed top-0 left-0 w-full h-full z-0"></canvas>

    <!-- 主内容容器 -->
    <div class="container mx-auto px-4 py-8 relative z-10 flex flex-col items-center justify-center min-h-screen">
        <!-- 装饰元素 -->
        <div class="absolute top-10 left-10 opacity-30 hidden md:block">
            <i class="fa-solid fa-heart text-primary text-6xl animate-float-delay-1"></i>
        </div>
        <div class="absolute bottom-10 right-10 opacity-30 hidden md:block">
            <i class="fa-solid fa-heart text-primary text-6xl animate-float-delay-2"></i>
        </div>
        <div class="absolute top-1/4 right-10 opacity-20 hidden md:block">
            <i class="fa-solid fa-heart text-primary text-5xl animate-float-delay-3"></i>
        </div>
        
        <!-- 信封容器 -->
        <div id="envelopeContainer" class="max-w-md w-full relative cursor-pointer perspective-1000 animate-float">
            <!-- 信封底部 -->
            <div class="envelope-bottom bg-envelope rounded-b-3xl h-[320px] w-full absolute bottom-0 z-20 shadow-xl overflow-hidden">
                <!-- 信封内部装饰 -->
                <div class="absolute inset-0 bg-light/20 p-6">
                    <div class="text-center mt-16 opacity-30">
                        <i class="fa-solid fa-heart text-primary text-6xl"></i>
                    </div>
                </div>
            </div>
            
            <!-- 信封左侧 -->
            <div class="envelope-left bg-envelopeDark w-1/2 h-[320px] absolute bottom-0 left-0 z-10 rounded-bl-3xl transform origin-left rotate-y(-30deg)"></div>
            
            <!-- 信封右侧 -->
            <div class="envelope-right bg-envelopeDark w-1/2 h-[320px] absolute bottom-0 right-0 z-10 rounded-br-3xl transform origin-right rotate-y(30deg)"></div>
            
            <!-- 信封封口 -->
            <div id="envelopeFlap" class="envelope-flap bg-envelope w-full h-[240px] absolute top-0 z-30 rounded-t-3xl transform origin-top transition-transform duration-1000 ease-in-out" style="transform: rotateX(0deg);">
                <!-- 信封封口装饰 - 居中爱心样式 -->
                <div class="absolute inset-0 flex flex-col items-center justify-center pt-4">
                    <div class="heart-beat relative mb-14">
                        <div class="heart-shape bg-primary shadow-lg" style="width: 140px; height: 140px;">
                            <div class="absolute inset-0 flex items-center justify-center transform -rotate-45">
                                <i class="fa-solid fa-heart text-white text-5xl"></i>
                            </div>
                        </div>
                        <!-- 爱心光晕效果 -->
                        <div class="absolute -inset-4 bg-primary/20 rounded-full blur-xl animate-pulse"></div>
                    </div>
                    
                    <!-- 明确的点击提示 -->
                    <div class="mt-4">
                        <div class="bg-white/80 px-8 py-4 rounded-full shadow-lg inline-block transform hover:scale-110 transition-all duration-300">
                            <p class="text-primary font-medium text-lg">点击爱心开启祝福</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 信封上的文字 -->
            <div class="absolute bottom-16 left-1/2 transform -translate-x-1/2 z-40 text-center">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark text-shadow-lg">给亲爱的妈妈</h2>
            </div>
        </div>
        
        <!-- 祝福内容 (初始隐藏) -->
        <div id="content" class="max-w-4xl mx-auto text-center opacity-0 pointer-events-none transition-opacity duration-1000 w-full">
            <!-- 标题 -->
            <h1 id="title" class="text-[clamp(2.5rem,8vw,5rem)] font-bold font-cursive text-primary mb-8 tracking-wider text-shadow-glow opacity-0 transform translate-y-10">
                母亲节快乐
            </h1>
            
            <!-- 倒计时区域 -->
            <div id="countdown" class="mb-12 opacity-0 transform translate-y-10">
                <div class="grid grid-cols-4 gap-4 max-w-md mx-auto">
                    <div class="bg-glass rounded-xl p-6 shadow-xl transform hover:scale-105 transition-all">
                        <div id="days" class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-primary">00</div>
                        <div class="text-sm text-gray-600 mt-2">天</div>
                    </div>
                    <div class="bg-glass rounded-xl p-6 shadow-xl transform hover:scale-105 transition-all">
                        <div id="hours" class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-primary">00</div>
                        <div class="text-sm text-gray-600 mt-2">时</div>
                    </div>
                    <div class="bg-glass rounded-xl p-6 shadow-xl transform hover:scale-105 transition-all">
                        <div id="minutes" class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-primary">00</div>
                        <div class="text-sm text-gray-600 mt-2">分</div>
                    </div>
                    <div class="bg-glass rounded-xl p-6 shadow-xl transform hover:scale-105 transition-all">
                        <div id="seconds" class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-primary">00</div>
                        <div class="text-sm text-gray-600 mt-2">秒</div>
                    </div>
                </div>
            </div>
            
            <!-- 祝福卡片 -->
            <div id="card" class="bg-glass rounded-3xl p-8 md:p-12 shadow-2xl transform hover:scale-105 transition-all duration-500 opacity-0 translate-y-10">
                <!-- 祝福文字 -->
                <div class="mt-6">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold font-serif text-primary mb-6 tracking-wide">亲爱的妈妈</h2>
                    <div class="prose prose-lg max-w-none mx-auto mb-8">
                        <p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-700 leading-relaxed mb-6">
                            时光荏苒，您的爱始终如一地包围着我。<br>
                            是您用温暖的怀抱和无尽的耐心，陪伴我走过人生的每一步。
                        </p>
                        <h4 class="text-[clamp(1.2rem,2.5vw,1.75rem)] font-medium font-serif text-primary leading-relaxed mt-8">
                            妈，爱你这件事，<br>
                            不用挑日子，<br>
                            但今天特别想告诉你。
                        </h4>
                    </div>
                </div>
                
                <!-- 装饰元素 -->
                <div class="flex justify-center gap-4 mt-8">
                    <div class="w-2 h-2 bg-primary rounded-full"></div>
                    <div class="w-2 h-2 bg-primary/70 rounded-full"></div>
                    <div class="w-2 h-2 bg-primary/50 rounded-full"></div>
                </div>
                
                <!-- 签名 -->
                <div class="mt-8 text-right">
                    <p class="text-gray-600 italic text-lg">————杨小平</p>
                </div>
            </div>
            
            <!-- 互动按钮 -->
            <div id="actions" class="mt-12 flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6 opacity-0">
                <button id="playMusic" class="w-full sm:w-auto bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-full shadow-lg transform hover:scale-105 transition-all flex items-center justify-center">
                    <i class="fa-solid fa-music mr-3 text-xl"></i> 
                    <span class="text-lg">播放音乐</span>
                </button>
                <button id="sendLove" class="w-full sm:w-auto bg-accent hover:bg-accent/90 text-white px-8 py-4 rounded-full shadow-lg transform hover:scale-105 transition-all flex items-center justify-center">
                    <i class="fa-solid fa-heart mr-3 text-xl"></i> 
                    <span class="text-lg">发送爱心</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 爱心动画Canvas -->
    <div id="loveContainer" class="fixed inset-0 pointer-events-none z-0"></div>

    <!-- 音频元素 -->
    <audio id="backgroundMusic" loop>
        <source src="伴奏.mp3" type="audio/mpeg">
    </audio>

    <script>
        // 音频控制变量
        const audio = document.getElementById('backgroundMusic');
        const playMusicBtn = document.getElementById('playMusic');
        let isMusicPlaying = false;
        let isAudioInitialized = false;
        let isAudioAllowed = false;
        
        // 文字雨效果
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;

        // 文字雨内容
        var texts = '母亲节快乐！妈妈我爱你！'.split('');
        var fontSize = 16;
        var columns = canvas.width / fontSize;
        var drops = [];
        
        // 初始化下落位置
        for (var x = 0; x < columns; x++) {
            drops[x] = 1;
        }

        // 绘制函数
        function draw() {
            // 绘制半透明背景，创建拖尾效果
            ctx.fillStyle = 'rgba(248, 233, 233, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 设置文字样式
            ctx.fillStyle = '#943e4e';
            ctx.font = fontSize + 'px Inter, sans-serif';
            
            // 绘制每一列的文字
            for (var i = 0; i < drops.length; i++) {
                var text = texts[Math.floor(Math.random() * texts.length)];
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                
                // 重置位置或继续下落
                if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {
                    drops[i] = 0;
                }
                drops[i]++;
            }
        }
        
        // 每33毫秒更新一次
        setInterval(draw, 33);

        // 爱心粒子效果
        var loveContainer = document.getElementById('loveContainer');
        
        // 创建Canvas元素并添加到容器中
        var loveCanvas = document.createElement('canvas');
        loveCanvas.id = 'loveCanvas';
        loveCanvas.style.width = '100%';
        loveCanvas.style.height = '100%';
        loveContainer.appendChild(loveCanvas);
        
        var loveCtx = loveCanvas.getContext('2d');
        
        // 设置Canvas尺寸
        function resizeLoveCanvas() {
            loveCanvas.width = loveContainer.clientWidth;
            loveCanvas.height = loveContainer.clientHeight;
        }
        
        // 初始化和监听窗口大小变化
        resizeLoveCanvas();
        window.addEventListener('resize', resizeLoveCanvas);
        
        // 粒子类
        class Particle {
            constructor(x, y, vx, vy, size, color) {
                this.x = x;
                this.y = y;
                this.vx = vx;
                this.vy = vy;
                this.size = size;
                this.color = color;
                this.life = 1;
                this.lifeRate = Math.random() * 0.01 + 0.005;
                this.angle = Math.random() * Math.PI * 2;
                this.rotationSpeed = (Math.random() - 0.5) * 0.1;
            }
            
            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.vy += 0.05;
                this.life -= this.lifeRate;
                this.angle += this.rotationSpeed;
            }
            
            draw() {
                loveCtx.fillStyle = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${this.life})`;
                
                // 绘制旋转爱心
                loveCtx.save();
                loveCtx.translate(this.x, this.y);
                loveCtx.rotate(this.angle);
                
                loveCtx.beginPath();
                loveCtx.moveTo(0, -this.size);
                loveCtx.bezierCurveTo(
                    -this.size, -this.size*1.5,
                    -this.size*2, 0,
                    0, this.size
                );
                loveCtx.bezierCurveTo(
                    this.size*2, 0,
                    this.size, -this.size*1.5,
                    0, -this.size
                );
                loveCtx.fill();
                
                loveCtx.restore();
            }
        }
        
        // 爱心形状函数
        function heartShape(t) {
            const scale = 15;
            const x = 16 * Math.pow(Math.sin(t), 3) * scale;
            const y = -(13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t)) * scale;
            return { x, y };
        }
        
        // 生成爱心粒子
        let particles = [];
        let isCreatingHearts = false;
        
        function createHeartParticles(x, y, count = 100) {
            const colorVariations = [
                { r: 148, g: 62, b: 78 }, // 主色
                { r: 212, g: 165, b: 165 }, // 浅色
                { r: 190, g: 100, b: 110 }, // 中间色
                { r: 160, g: 70, b: 80 } // 深色
            ];
            
            for (let i = 0; i < count; i++) {
                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * 30;
                const speed = (Math.random() * 2 + 1) * (0.8 + Math.random() * 0.4);
                
                // 从爱心形状上取点
                const t = Math.random() * Math.PI * 2;
                const heartPoint = heartShape(t);
                
                const vx = (heartPoint.x / 20) + Math.cos(angle) * speed;
                const vy = (heartPoint.y / 20) + Math.sin(angle) * speed;
                
                const size = Math.random() * 3 + 1.5;
                const color = colorVariations[Math.floor(Math.random() * colorVariations.length)];
                
                particles.push(new Particle(x, y, vx, vy, size, color));
            }
        }
        
        // 爱心动画循环
        function animateHearts() {
            loveCtx.clearRect(0, 0, loveCanvas.width, loveCanvas.height);
            
            if (isCreatingHearts) {
                // 获取白色盒子的位置
                const card = document.getElementById('card');
                if (card) {
                    const rect = card.getBoundingClientRect();
                    const centerX = rect.left + rect.width / 2;
                    const centerY = rect.top + rect.height / 2;
                    
                    // 从白色盒子周围生成爱心
                    const boxPadding = 50;
                    
                    // 顶部生成
                    if (Math.random() < 0.3) {
                        const x = centerX + (Math.random() - 0.5) * rect.width;
                        const y = rect.top - boxPadding;
                        createHeartParticles(x, y, 5);
                    }
                    
                    // 底部生成
                    if (Math.random() < 0.3) {
                        const x = centerX + (Math.random() - 0.5) * rect.width;
                        const y = rect.bottom + boxPadding;
                        createHeartParticles(x, y, 5);
                    }
                    
                    // 左侧生成
                    if (Math.random() < 0.3) {
                        const x = rect.left - boxPadding;
                        const y = centerY + (Math.random() - 0.5) * rect.height;
                        createHeartParticles(x, y, 5);
                    }
                    
                    // 右侧生成
                    if (Math.random() < 0.3) {
                        const x = rect.right + boxPadding;
                        const y = centerY + (Math.random() - 0.5) * rect.height;
                        createHeartParticles(x, y, 5);
                    }
                }
            }
            
            for (let i = particles.length - 1; i >= 0; i--) {
                const p = particles[i];
                p.update();
                p.draw();
                
                if (p.life <= 0 || p.y > loveCanvas.height || p.x < 0 || p.x > loveCanvas.width) {
                    particles.splice(i, 1);
                }
            }
            
            requestAnimationFrame(animateHearts);
        }
        
        animateHearts();
        
        // 倒计时功能
        function startCountdown(duration, displayDays, displayHours, displayMinutes, displaySeconds) {
            let timer = duration;
            let days, hours, minutes, seconds;
            
            const countdownInterval = setInterval(function() {
                days = Math.floor(timer / (60 * 60 * 24));
                hours = Math.floor((timer % (60 * 60 * 24)) / (60 * 60));
                minutes = Math.floor((timer % (60 * 60)) / 60);
                seconds = Math.floor(timer % 60);
                
                displayDays.textContent = days < 10 ? "0" + days : days;
                displayHours.textContent = hours < 10 ? "0" + hours : hours;
                displayMinutes.textContent = minutes < 10 ? "0" + minutes : minutes;
                displaySeconds.textContent = seconds < 10 ? "0" + seconds : seconds;
                
                if (--timer < 0) {
                    clearInterval(countdownInterval);
                    showContent();
                }
            }, 1000);
        }
        
        // 显示内容
        function showContent() {
            document.getElementById('countdown').classList.add('opacity-0');
            
            setTimeout(() => {
                document.getElementById('countdown').classList.add('hidden');
                
                // 显示卡片和标题
                const title = document.getElementById('title');
                title.classList.remove('opacity-0', 'translate-y-10');
                title.classList.add('animate-fade-in');
                
                setTimeout(() => {
                    const card = document.getElementById('card');
                    card.classList.remove('opacity-0', 'translate-y-10');
                    card.classList.add('animate-slide-up');
                    
                    // 延迟显示按钮和额外信息
                    setTimeout(() => {
                        const actions = document.getElementById('actions');
                        actions.classList.remove('opacity-0');
                        actions.classList.add('animate-fade-in');
                        
                        setTimeout(() => {
                            const extraMessage = document.getElementById('extraMessage');
                            extraMessage.classList.remove('opacity-0');
                            extraMessage.classList.add('animate-fade-in');
                            
                            // 启动爱心动画
                            isCreatingHearts = true;
                            
                            // 尝试播放音乐
                            tryPlayMusic();
                        }, 500);
                    }, 800);
                }, 800);
            }, 500);
        }
        
        // 音频初始化
        function initAudio() {
            if (!isAudioInitialized) {
                audio.load();
                isAudioInitialized = true;
                console.log('音频已初始化');
            }
        }
        
        // 尝试播放音乐
        function tryPlayMusic() {
            initAudio();
            
            // 如果已经允许播放，则直接播放
            if (isAudioAllowed) {
                playMusic();
                return;
            }
            
            // 尝试播放并处理结果
            audio.play().then(() => {
                isMusicPlaying = true;
                isAudioAllowed = true;
                updateMusicButton();
                console.log('音乐自动播放成功');
            }).catch(error => {
                console.log('自动播放失败:', error);
                // 显示播放按钮，提示用户点击
                updateMusicButton();
            });
        }
        
        // 播放音乐
        function playMusic() {
            initAudio();
            
            audio.play().then(() => {
                isMusicPlaying = true;
                updateMusicButton();
                console.log('音乐播放成功');
            }).catch(error => {
                console.error('播放音乐失败:', error);
                alert('请点击按钮启用音乐');
            });
        }
        
        // 暂停音乐
        function pauseMusic() {
            audio.pause();
            isMusicPlaying = false;
            updateMusicButton();
        }
        
        // 更新音乐按钮状态
        function updateMusicButton() {
            if (isMusicPlaying) {
                playMusicBtn.innerHTML = 
                    '<i class="fa-solid fa-pause mr-3 text-xl"></i> <span class="text-lg">暂停音乐</span>';
            } else {
                playMusicBtn.innerHTML = 
                    '<i class="fa-solid fa-music mr-3 text-xl"></i> <span class="text-lg">播放音乐</span>';
            }
        }
        
        // 切换音乐状态
        function toggleMusic() {
            if (isMusicPlaying) {
                pauseMusic();
            } else {
                playMusic();
            }
        }
        
        // 打开信封
        function openEnvelope() {
            const envelopeFlap = document.getElementById('envelopeFlap');
            const envelopeContainer = document.getElementById('envelopeContainer');
            const content = document.getElementById('content');
            
            // 禁用点击
            envelopeContainer.style.pointerEvents = 'none';
            
            // 动画打开信封
            envelopeFlap.style.transform = 'rotateX(-180deg)';
            
            // 一段时间后隐藏信封并显示内容
            setTimeout(() => {
                envelopeContainer.classList.add('opacity-0');
                setTimeout(() => {
                    envelopeContainer.classList.add('hidden');
                    content.classList.remove('opacity-0');
                    content.style.pointerEvents = 'auto';
                    
                    // 显示标题和倒计时
                    setTimeout(() => {
                        document.getElementById('title').classList.remove('opacity-0', 'translate-y-10');
                        document.getElementById('title').classList.add('animate-fade-in');
                        
                        setTimeout(() => {
                            document.getElementById('countdown').classList.remove('opacity-0', 'translate-y-10');
                            document.getElementById('countdown').classList.add('animate-fade-in');
                            
                            // 开始倒计时
                            const duration = 5;
                            const displayDays = document.getElementById('days');
                            const displayHours = document.getElementById('hours');
                            const displayMinutes = document.getElementById('minutes');
                            const displaySeconds = document.getElementById('seconds');
                            
                            startCountdown(duration, displayDays, displayHours, displayMinutes, displaySeconds);
                        }, 500);
                    }, 300);
                }, 500);
            }, 1000);
        }
        
        // 页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', () => {
            // 初始化音频
            initAudio();
            
            // 监听各种用户交互事件，用于获取播放权限
            ['touchstart', 'click', 'keydown', 'scroll'].forEach(event => {
                document.addEventListener(event, function initialInteraction() {
                    initAudio();
                    
                    // 尝试在用户第一次交互时播放一个短的无声音频
                    // 这有助于获取播放权限
                    const silentAudio = new Audio('data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YQAAAAA=');
                    silentAudio.play().then(() => {
                        silentAudio.pause();
                        silentAudio.currentTime = 0;
                        console.log('已获取音频播放权限');
                    }).catch(e => {
                        console.log('无法自动获取播放权限:', e);
                    });
                    
                    // 只监听一次
                    document.removeEventListener(event, initialInteraction);
                }, { once: true });
            });
            
            // 点击信封打开
            document.getElementById('envelopeContainer').addEventListener('click', () => {
                openEnvelope();
                
                // 在用户点击信封时尝试播放音乐
                tryPlayMusic();
            });
            
            // 互动按钮事件
            playMusicBtn.addEventListener('click', toggleMusic);
            
            document.getElementById('sendLove').addEventListener('click', () => {
                // 生成大量爱心
                const card = document.getElementById('card');
                if (card) {
                    const rect = card.getBoundingClientRect();
                    const centerX = rect.left + rect.width / 2;
                    const centerY = rect.top + rect.height / 2;
                    createHeartParticles(centerX, centerY, 200);
                }
            });
            
            // 窗口大小变化时调整Canvas
            window.addEventListener('resize', () => {
                canvas.height = window.innerHeight;
                canvas.width = window.innerWidth;
                resizeLoveCanvas();
            });
            
            // 点击屏幕也可以触发爱心
            document.addEventListener('click', (e) => {
                if (e.target.id !== 'playMusic' && e.target.id !== 'sendLove') {
                    createHeartParticles(e.clientX, e.clientY, 50);
                }
            });
        });
    </script>
</body>
</html>